<template>
  <div>
    <div class="inline-container">
      <!-- 搜索框 -->
      <div class="centered-search">
        <el-form :inline="true" :model="sysLogQuery" class="demo-form-inline">
          <el-form-item label="操作人">
            <el-input
              v-model="sysLogQuery.fullName"
              placeholder="用户账号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getLogData()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 2、分隔线区域 -->
    <el-divider></el-divider>

    <!-- 3、表单 -->
    <el-table :data="logData" style="width: 100%" border>
      <el-table-column type="index" width="80" label="序号"></el-table-column>
      <el-table-column prop="createTime" label="操作时间" width="150">
      </el-table-column>
      <el-table-column prop="fullName" label="操作人" width="150">
        <template slot-scope="scope">
          <!-- 使用插槽来处理空单元格情况 -->
          {{ scope.row.fullName || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="moduleName" label="操作模块" width="150">
      </el-table-column>
      <el-table-column prop="content" label="操作内容" width="250">
      </el-table-column>
      <el-table-column prop="methodName" label="调用接口名称" width="250">
      </el-table-column>
      <el-table-column prop="url" label="url" width="380"> </el-table-column>
      <el-table-column prop="businessTime" label="消耗时间(毫秒)">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="sysLogQuery.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="sysLogQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { list } from "@/services/log";
export default {
  name: "Log",

  data() {
    return {
      total: 0,
      sysLogQuery: {
        fullName: "",
        current: 1,
        size: 10,
      },
      logData: [],
    };
  },

  mounted() {
    this.getLogData();
  },

  methods: {
    // ---------------------crud-------------------
    getLogData() {
      list(this.sysLogQuery)
        .then((res) => {
          this.logData = res.data.records;
          this.total = res.data.total;
        })
        .catch((error) => {});
    },
    // ---------------------其他-------------------
    // 重置搜索框
    resetForm() {
      this.sysLogQuery = {
        fullName: "",
        current: 1,
        size: 10,
      };
      this.getLogData();
    },
    //分页处理
    handleSizeChange(val) {
      this.sysLogQuery.size = val;
      this.getLogData();
    },
    handleCurrentChange(val) {
      this.sysLogQuery.current = val;
      this.getLogData();
    },
  },
};
</script>

<style lang="scss" scoped>
.inline-container {
  height: 40px;
  display: flex;
  align-items: center; /* Optional: Align items vertically center if needed */
  .centered-search {
    margin-left: 30%;
    justify-content: center;
    margin-top: 26px;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
</style>